<template>
    <div>
        <p style="color:var(--themeColor)" class="tabs-top-title">{{$t('Storage-area')}}</p>
        <div style="margin:1em 0 1em 0 ">
            <a-tooltip placement='bottom'>
                <template slot='title'>
                    <span>{{$t('Create')}}</span>
                </template>
                <a-button type='primary' icon='file-add' @click="create = true"></a-button>
            </a-tooltip>
            <a-tooltip placement='bottom'>
                <template slot='title'>
                    <span>{{$t('Delete')}}</span>
                </template>
                <a-button type='danger' style="margin-left:1em" icon='close-circle' @click="openmodal('delsub')"></a-button>
            </a-tooltip>
        </div>

        <a-table class="tabstyle" :columns='areacolumns' :dataSource='areadata' size='small' :loading="loading" :pagination='pagination' 
                 :rowSelection='{type:"radio",selectedRow:selectedRowKeys,onChange:onSelectChange}' rowKey="id"
                 :locale="defaultSetting">
            <div slot="filterDropdown" slot-scope="{ setSelectedKeys, selectedKeys, confirm, clearFilters, column }" class='custom-filter-dropdown'>
                <a-input v-ant-ref="c => searchInput = c" :placeholder="`Search ${column.dataIndex}`" :value="selectedKeys[0]" @change="e => setSelectedKeys(e.target.value ? [e.target.value] : [])" @pressEnter="() => handleSearch(selectedKeys, confirm)" style="width: 188px; margin-bottom: 8px; display: block;" />
                <a-button type='primary' @click="() => handleSearch(selectedKeys, confirm)" icon="search" size="small" style="width: 90px; margin-right: 8px">Search</a-button>
                <a-button @click="() => handleReset(clearFilters)" size="small" style="width: 90px">Reset</a-button>
            </div>
            <a-icon slot="filterIcon" slot-scope="filtered" type='search' :style="{ color: filtered ? '#108ee9' : undefined }" />
            <template slot="customRender" slot-scope="text">
                <span v-if='searchText'>
                    <template v-for="(fragment, i) in text.toString().split(new RegExp(`(?<=${searchText})|(?=${searchText})`, 'i'))">
                        <mark v-if="fragment.toLowerCase() === searchText.toLowerCase()" :key="i" class="highlight">{{fragment}}</mark>
                        <template v-else>{{fragment}}</template>
                    </template>
                </span>
                <template v-else>{{text}}</template>
            </template>
            <span slot="is_compression" slot-scope='is_compression'>
                {{is_compression == true?$t('Yes'):$t('No')}}
                <!-- <a-tag :color="is_compression == true?'green':'red'">{{enabled == true?'是':'否'}}</a-tag> -->
            </span>
        </a-table>
        <a-modal :title="$t('Create')+$t('Area')" v-model='create' @cancel='cancelhandle' width='35%' @ok='addsub' :cancelText="$t('Cancel')" :okText="$t('Sure')" :maskClosable='false' v-dragModal>
            <a-spin size="large" style="position:absolute;left:50%; top:50%; transform: translate(-50%, -50%);z-index:1;background:rgba(255,255,255,.6);padding:10%" tip="Submit successfully Loading..." v-if="spinning == true"></a-spin>
		    <a-form :form='form'>
	            <a-form-item :label="$t('Area')+'Id'" v-bind='formlayout'>
			      	<a-input v-decorator="['id',{
	                    rules:[{required:true,message:$t('Enter')+$t('Area')+'Id'}]
	                }]" style="width: 100%;" :placeholder="$t('Enter')+$t('Area')+'Id'">
	                </a-input>
			    </a-form-item>
                <a-form-item :label="$t('Data-pool')" v-bind='formlayout' has-feedback>
                    <a-select v-decorator="['data_pool',
                    {
                        rules:[{
                            required:true,message:$t('Choose')+$t('Data-pool')
                        }]
                    }]" :placeholder="$t('Choose')+$t('Data-pool')">
                        <a-select-option v-for='(t,i) in typedata.normal' :value='t' :key="i">{{t}}</a-select-option>
                    </a-select>
                </a-form-item>
                <a-form-item :label="$t('Index-pool')" v-bind='formlayout' has-feedback>
                    <a-select v-decorator="['index_pool',
                    {
                        rules:[{
                            required:true,message:$t('Choose')+$t('Index-pool')
                        }]
                    }]" :placeholder="$t('Choose')+$t('Index-pool')">
                        <a-select-option v-for='(t,i) in typedata.extra' :value='t' :key="i">{{t}}</a-select-option>
                    </a-select>
                </a-form-item>
                <a-form-item :label="$t('Extra-pool')" v-bind='formlayout' has-feedback>
                    <a-select v-decorator="['data_extr_pool',
                    {
                        rules:[{
                            required:true,message:$t('Choose')+$t('Extra-pool')
                        }]
                    }]" :placeholder="$t('Choose')+$t('Extra-pool')">
                        <a-select-option v-for='(t,i) in typedata.extra' :value='t' :key="i">{{t}}</a-select-option>
                    </a-select>
                </a-form-item>
                <a-form-item v-bind="formlayout" :label="$t('Compress')">
                    <a-radio-group v-decorator="['is_compression']">
                        <a-radio value="true">{{$t('Yes')}}</a-radio>
                        <a-radio value="false">{{$t('No')}}</a-radio>
                    </a-radio-group>
                </a-form-item>
		    </a-form>
            
		</a-modal>
    </div>
</template>
<script>
import { setTimeout } from 'timers';
import EmptyData from '@/components/common/EmptyData'
import request from '@/request/request'
export default {
    name:'areas',
    components: { EmptyData },
    data(){
        return{
          	form:this.$form.createForm(this),
            areacolumns:[
                {title: this.$t('Area')+'ID',dataIndex:'id',key:'id',
                sorter:(a,b)=>a.id.length - b.id.length,
                scopedSlots: {
                    filterDropdown: 'filterDropdown',
                    filterIcon: 'filterIcon',
                    customRender: 'customRender'
                },
                onFilter: (value,record) => record.id.toLowerCase().includes(value.toLowerCase()),
                onFilterDropdownVisibleChange: (visible) => {
                    if(visible) {
                        setTimeout(() => {
                            this.searchInput.focus()
                        }, 0)
                    }
                }
                },
                {title: this.$t('Data-pool'),dataIndex:'data_pool',key:'data_pool'},
                {title: this.$t('Index-pool'),dataIndex:'index_pool',key:'index_pool'},
                {title: this.$t('Extra-pool'),dataIndex:'data_extra_pool',key:'data_extra_pool'},
                {title: this.$t('Compress'),dataIndex:'is_compression',key:'is_compression',scopedSlots:{customRender:'is_compression'}}
            ],
            searchInput:null,
            searchText:'',
            pagination:{
                defaultPageSize:5,
                showTotal: total => `${this.$t('A-total-of')} ${total} ${this.$t('Data')}`,
                showSizeChanger:true,
                pageSizeOptions:['5','10','15','20'],
                onShowSizeChange:(current,pageSize)=>this.pageSize=pageSize,
                buildOptionText: (props) => `${props.value} / ${this.$t('page')}`
            },
            areadata:[],
            selectedRowKeys:[],
            formlayout:{
                labelCol:{span:6},
                wrapperCol:{span:14}
            },
            create:false,
            typedata:[],
            radios:'',
            ids:'',
            loading:true,
            spinning:false,
            basebucket:'',
            defaultSetting: {emptyText:<EmptyData />}
        }
    },
    computed:{
    	getbasebucket() {
	        return this.$store.state.basebucket
	    },
        getlanguage(){
            return this.$store.state.language
        }
    },
    watch:{
        getlanguage(val){
            this.areacolumns=[
                {title: this.$t('Area')+'ID',dataIndex:'id',key:'id',
                sorter:(a,b)=>a.id.length - b.id.length,
                scopedSlots: {
                    filterDropdown: 'filterDropdown',
                    filterIcon: 'filterIcon',
                    customRender: 'customRender'
                },
                onFilter: (value,record) => record.id.toLowerCase().includes(value.toLowerCase()),
                onFilterDropdownVisibleChange: (visible) => {
                    if(visible) {
                        setTimeout(() => {
                            this.searchInput.focus()
                        }, 0)
                    }
                }
                },
                {title: this.$t('Data-pool'),dataIndex:'data_pool',key:'data_pool'},
                {title: this.$t('Index-pool'),dataIndex:'index_pool',key:'index_pool'},
                {title: this.$t('Extra-pool'),dataIndex:'data_extra_pool',key:'data_extra_pool'},
                {title: this.$t('Compress'),dataIndex:'is_compression',key:'is_compression',scopedSlots:{customRender:'is_compression'}}
            ]
        }
    },
    methods:{
        getdata(){
            this.loading = true
            request('get', 'rgw/zone').then(res=>{
                if(res.data.flag == 1) {
					this.model(res.data.id) //返回模板
					this.notice(res.data.id,res.data.params,res.data.flag) //通知列表显示
				}else {
                    this.areadata = res.data
                    // this.loading = false
                    this.getbasedata2()
                }
            }).catch(err => {
                // this.loading = false
            }).finally(() => {
                this.loading = false
            })
        },
        getbasedata(){
            request('get', 'rgw/zone/_info').then(res=>{
                if(res.data.flag == 1) {
					this.model(res.data.id) //返回模板
					this.notice(res.data.id,res.data.params,res.data.flag) //通知列表显示
				}else {
                    this.typedata = res.data
                }
            })
        },
        getbasedata2(){
            // this.$axios.get(this.allurl+'rgw/bucket/_info').then(res=>{
            request('get', 'rgw/user/getNameAll').then(res=>{
                if(res.data.flag == 1) {
                    this.$message.error(res.data.params.detail);
                    this.$store.commit('getbasebucket', {
            		    basebucket: [],
                    })
                }else {
                    this.$store.commit('getbasebucket', {
                        basebucket: res.data,
                    })
                }
            })
        },
        handleSearch(selectedKeys, confirm) {
            confirm()
            this.searchText = selectedKeys[0]
        },
        handleReset(clearFilters) {
            clearFilters()
            this.searchText = ''
        }, 
        onSelectChange (selectedRowKeys) {
            this.ids = selectedRowKeys.join()
	        this.selectedRowKeys = selectedRowKeys
        },
        openmodal(name){
	        if(this.selectedRowKeys.length!=0){
	            if(name == 'delsub')
	                this.delsub()
	        }
	        else{
	          this.$notification['error']({
	            message: this.$t('Choose')+ this.$t('Operating-object')
	          })
	        }
        },
        addsub(e){
			e.preventDefault();
			this.form.validateFields((err,value)=>{
				if(!err){
                    this.spinning = true
                    if(value.is_compression == 'true'){
                        value.is_compression = true
                    }else{
                        value.is_compression = false
                    }
					request('post', 'rgw/zone',value).then(res=>{
                        this.model(res.data.id) //返回模板
                        this.notice(res.data.id, res.data.params, res.data.flag) //通知列表显示
                        // this.gettask()  //任务栏信息
                        this.spinning = false
						this.create=false
                        this.form.resetFields();
                        this.getdata()
					})
				}
			})
        },
        delsub(){
			let _this = this
            this.$confirm({
                title:this.$t('Delete')+this.$t('Area'),
                content: this.$t('Sure-to-del')+": "+this.ids+" ？",
                cancelText:this.$t('Cancel'),
                okText:this.$t('Sure'),
                okType:'danger',
                onOk(){
                    request('DELETE', 'rgw/zone', {
                        // data:{
                            id: _this.ids
                        // }
                    }).then(res=>{
                        _this.model(res.data.id) //返回模板
                        _this.notice(res.data.id, res.data.params, res.data.flag) //通知列表显示
						// _this.gettask()  //任务栏信息
                        _this.getdata()
				        _this.selectedRowKeys = []; // 将选择的项清空
                    })
                },
                onCancel(){
                }
            })
		},
        cancelhandle(e){
	        this.create=false
            this.spinning=false
	        this.form.resetFields();
        },
    },
    mounted(){
        this.getdata()
        this.getbasedata()
    }
}
</script>
